<template>
  <div class="app-container">
    <el-form
      :inline="true"
      :model="param"
      label-width="120px"
      auto-complete="on"
      label-position="right"
    >
    	<el-row type="flex" justify="center">
    <#if columns??>
    <#list columns as column>
	<#if column_index != 0 && column_index % 4 = 0 && column_has_next>
		</el-row>
		<el-row type="flex" justify="center">
	</#if>
	<#if column.select = 'Y' >
	    	<el-col :span="span">
	        <#if column.el ='el-select' >
	            <add-or-update-select :form-data="formData" :key-str="'${column.changeField}'" />
	        <#else>        
	            <el-input v-model="param.${column.changeField}"/>
		    </#if>
	        </el-col>
    </#if>
    <#if column.between = 'Y' >
	    	<el-col :span="span">
	        <#if column.el ='date' >
	            <el-date-picker v-model="param.${column.changeField}" type="date" placeholder="${column.remark}" />
	        <#elseif column.el ='time'>
	        	<el-date-picker v-model="param.${column.changeField}" type="datetime" placeholder="${column.remark}"/>
	        <#elseif column.el ='month'>
	        
	        <#elseif column.el ='betweenDate'>
	        
	        <#elseif column.el ='betweenTime'>
	        
	        <#elseif column.el ='betweenMonth'>
	        
	        <#else>        
	            <el-input v-model="param.${column.changeField}"/>
		    </#if>
	        </el-col>
    </#if>
    </#list>
	</#if>
		</el-row>
    </el-form>
    <query-button
      :data="row"
      :title="this.$route.meta.title"
      :is-open="true"
      :route="this.$route"
      :property="'list'"
      :table="table"
      :det-url="'/${changeClassName}/cancel${className}ById'"
    />
    <cur-table
      :param="param"
      :list="list"
      :fetch-data="fetchData"
      :list-loading="listLoading"
      :table="table"
      :table-column="tableColumn"
      :total="total"
    />
    <add-or-update
      :dialog-form-visible="formVisible"
      :dialog-title="dialogTitle"
      :form-data="row"
    />
  </div>
</template>

<script>
import { getDataList } from '@/api/table/curd'
import AddOrUpdate from './modify'
export default {
  components: { AddOrUpdate },
  data() {
    return {
      listLoading: false,
      dialogTitle: '新增' + this.$route.meta.title,
      formVisible: false,
      list: [],
      span: 8,
      total: 0,
      pageSizes: [10, 20, 30, 40],
      param: {
      	yn: 1
      },
      row: {},
      table: {
        selections: []
      },
      tableColumn: [
<#if columns??>
    <#list columns as column>
    	{
          column: '${column.changeField}',
     <#if column.formatter !='' >
     	  formatter:true,
     </#if>
          comment: '${column.remark}'
     <#if column_has_next>
        },
     <#else> 
     	}
    </#if>
    </#list>
</#if>
      ]
    }
  },
  mounted() {
  },
  created() {},
  methods: {
    fetchData() {
      this.listLoading = true
      getDataList('/${changeClassName}/select${className}List', this.param)
        .then(response => {
          if (response.data) {
            this.list = response.data
            this.total = response.total
          }
          this.listLoading = false
        })
        .catch(error => {
          this.listLoading = false
          this.$message.error(error)
        })
    }
  }
}
</script>
